<template>
  <el-tabs
    v-model="activeName"
    :stretch="true"
    @tab-click="handleClick"
    class="eltabs"
  >
    <template v-if="type == 'patent'">
      <el-tab-pane label="专利公开信息" name="1">
        <Disclosure :type="type" :publicInfo="publicInfo" />
      </el-tab-pane>
      <el-tab-pane
        label="法律信息"
        name="2"
        v-if="publicInfo.leg_all && publicInfo.leg_all.length > 0"
      >
        <Legal :type="type" :publicInfo="publicInfo" />
      </el-tab-pane>
      <el-tab-pane label="技术价值度" name="3">
        <PatentValue :type="type" :publicInfo="publicInfo" />
      </el-tab-pane>
    </template>
    <template v-if="type == 'paper'">
      <el-tab-pane label="公开信息" name="1" style="width: '100px'">
        <Disclosure :type="type" :publicInfo="publicInfo" />
      </el-tab-pane>
      <el-tab-pane label="相关推荐" name="2" lazy>
        <Legal :type="type" :publicInfo="publicInfo" :id="id" />
      </el-tab-pane>
    </template>
    <template v-if="type == 'standard'">
      <el-tab-pane label="公开信息" name="1">
        <Disclosure :type="type" :publicInfo="publicInfo" />
      </el-tab-pane>
      <el-tab-pane
        v-if="publicInfo.type == '国家标准'"
        label="相近标准（计划）"
        name="2"
        lazy
      >
        <Standard :type="type" :publicInfo="publicInfo" />
      </el-tab-pane>
    </template>
    <template
      v-if="type !== 'patent' && type !== 'paper' && type !== 'standard'"
    >
      <el-tab-pane label="基本信息" name="1">
        <Disclosure :type="type" :publicInfo="publicInfo" />
      </el-tab-pane>
    </template>
  </el-tabs>
</template>

<script>
import { mapState } from "vuex";
import Disclosure from "./Disclosure";
import Legal from "./Legal";
import Families from "./Families";
import Relevant from "./Relevant";
import Citation from "./Citation";
import Achievement from "./Achievement";
import Standard from "./Standard";
import PatentValue from "../../patent/archives/PatentValue.vue";
export default {
  inject: ["reload"],
  props: {
    publicInfo: {
      type: Object,
    },
    citationId: {
      type: String,
    },
    type: {
      type: String,
    },
    id: {
      type: String,
    },
  },
  components: {
    Disclosure,
    Legal,
    Families,
    Relevant,
    Citation,
    Achievement,
    Standard,
    PatentValue,
  },
  data() {
    return {
      sqData: "",
      // publicInfo: {},
      patentList: [],
      allList: [],
      totalRow: 0,
      pageSize: 10,
      activeName: "1",
      mid: "",
    };
  },
  computed: {
    ...mapState(["searchWord"]),
  },
  methods: {
    handleClick() {},
  },
  mounted() {
    let dom = document.getElementsByClassName("el-tabs__nav-scroll")[0];
    if (this.type == "patent") {
      dom.style.width = "750px";
    } else if (this.type == "paper" || this.type == "standard") {
      dom.style.width = "300px";
    } else {
      dom.style.width = "150px";
    }
  },
};
</script>

<style lang="scss" scoped>
.eltabs {
  ::v-deep {
    .el-tabs__nav-scroll {
      max-width: 700px;
      padding-left: 20px;
    }
    .el-tabs__item {
      // width: 141px;
      height: 50px;
      line-height: 50px;
      padding: 0;
      padding-right: 20px;
      box-sizing: border-box;
      font-weight: normal;
      color: #9e9e9e !important;
      &.is-active {
        font-weight: bold;
        color: #000 !important;
      }
    }
    // .el-tabs__nav-scroll {
    //   max-width: 140px;
    // }
  }
}
::v-deep {
  .eltabs {
    height: calc(100% - 60px);
    .el-tabs__content {
      height: calc(100% - 50px);
      .el-tab-pane {
        height: 100%;
      }
      .el-tabs__item {
        width: 300px;
      }
    }
  }
}
</style>
